<template>
  <div style="width:500px;height:500px;margin:100px auto;">
    <canvas id="canvas" ref="canvasRef" width="500" height="500" style="box-shadow: 0px 0px 5px #ccc; border-radius: 8px"></canvas>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
const canvasRef = ref<HTMLCanvasElement>()
let ctx: CanvasRenderingContext2D
//stroke()描边    fill()填充  strokeStyle   fillStyle
const init = () => {
  ctx = canvasRef.value?.getContext("2d") as CanvasRenderingContext2D;
  ctx.strokeStyle = "#f00" // 描边样式设置为红色
  ctx.rect(50,50,200,100);
  ctx.stroke();
  ctx.beginPath(); //开启新路径
  ctx.fillStyle = "#0f0" // 描边样式设置为绿色
  ctx.rect(50,200,200,100);
  ctx.fill()
  // 矩形三
  ctx.beginPath() // 开启新路径
  ctx.strokeStyle = "#00f" // 描边样式重新设置为蓝色
  ctx.rect(50, 350, 200, 100) // 绘制矩形
  ctx.stroke() // 描边一个矩形轮廓
  //线
  ctx.beginPath()
  ctx.lineWidth = 10  //线宽
  ctx.lineCap='round' //设置直线端点显示的样式。可选值为：butt，round 和 square。默认是 butt。
  ctx.lineJoin='bevel' //设置两线段连接处所显示的样子。可选值为：round, bevel 和 miter。默认是 miter。
  ctx.moveTo(20,20)
  ctx.lineTo(400,20)
  ctx.lineTo(400,200)
  ctx.stroke()
  //lineDashOffset 设置虚线样式的起始偏移量。例如：15
  //setLineDash/getLineDash  setLineDash 设置虚线样式。  getLineDash 返回虚线设置的样式，长度为非负偶数的数组。
  // miterLimit为定值，角度越大
  //设置当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度。线段之间夹角比较大时，交点不会太远，但随着夹角变小，交点距离会呈指数级增大。如果交点距离大于miterLimit值，连接效果会变成了 lineJoin = bevel 的效果。
  ctx.beginPath()
  // ctx.setLineDash([5, 10, 20]);
  ctx.lineWidth = 5;
  ctx.lineJoin='miter'
  ctx.miterLimit = 10
  ctx.moveTo(0, 100);
  for (let i = 0; i < 50 ; i++) {
    var dy = i % 2 == 0 ? 200 : 100;
    ctx.lineTo(Math.pow(i, 1.5) * 2, dy);
  }
  ctx.stroke();
  ctx.closePath();

  //矩形
  // 矩形描边
  //rect(x, y, width, height)

  // 绘制矩形
  //strokeRect(x, y, width, height)

  // 填充矩形
  //fillRect(x, y, width, height)

  //ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);Canvas提供了绘制圆弧或圆的方法：arc()，该方法提供了给定坐标值（x,y）以后，按给定的半径（r）大小，从给定的起始点（startAngle）位置，默认顺时针方向绘制圆弧或圆到给定的终点（endAngle）。
  //startAngle 为圆弧或圆的起始点，从x轴方向开始计算，且单位为弧度、   endAngle 为圆弧或圆的终点，单位也是为弧度
  //弧度 = 角度 * Math.PI / 180
  ctx.beginPath()
  ctx.arc(300,400,20,0,90 * Math.PI / 180)
  ctx.stroke()

  //ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) x、y：椭圆的圆心坐标 radiusX：x轴的半径大小 radiusY：y轴的半径大小
  //rotation：椭圆的旋转角度，也是以弧度表示  startAngle：开始绘制点 endAngle：结束绘制点 anticlockwise：可选参数，表示绘制的方向（默认顺时针）。
  ctx.beginPath();
  ctx.ellipse(100, 150, 50, 100, 0, 0, 2 * Math.PI);
  ctx.stroke();
  ctx.beginPath();
  ctx.ellipse(400, 150, 50, 100, 0, 0, 2 * Math.PI);
  ctx.stroke();
  ctx.beginPath();
  ctx.ellipse(250, 350, 50, 100, Math.PI/2, 0, 2 * Math.PI); // 旋转90°
  ctx.fill();

  //二次贝塞尔曲线
  //quadraticCurveTo(cp1x, cp1y, x, y)
  //cp1x和cp1y为控制点坐标
  //x和y为结束点坐标
  ctx.strokeStyle = "#333";
  ctx.beginPath();
  ctx.moveTo(100, 250);
  ctx.quadraticCurveTo(250, 100, 400, 250);
  ctx.stroke();
}
onMounted(()=>{
  init()
})


</script>

<style scoped>

</style>